<template>
  <div class="container">
    <div>
      <label>输入：<input type="text" class="input" v-model="question"></label>
      <button @click="update">提交</button>
    </div>
    <div class="output">
      <div>
        <label>Streaming</label><input type="checkbox" v-model="stream">
      </div>
      <div>{{content}}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const question = ref('讲一个十二生肖的故事')
const content = ref('')
const stream = ref(false)

const update = async () => {
  if (!question.value) return
  content.value = '思考中...'

  const endpoint = 'http://localhost:3000/stream'
  const headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + import.meta.env.VITE_DEEPSEEK_API_KEY
  }

  if (stream.value) {
    content.value = ''
    const eventSource = new EventSource(`${endpoint}?question=${question.value}`) // 开启 SSE 连接
    eventSource.addEventListener('message', (event) => { // 监听 message 事件
      content.value += event.data
    })
    eventSource.addEventListener('end', (event) => {
      eventSource.close()
    })
  }
}
</script>

<style scoped>
.container{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  height: 100vh;
  font-size: 0.85rem;
}
.input{
  width: 200px;
}
.output{
  margin-top: 10px;
  min-height: 300px;
  width: 100%;
  text-align: left;
}
button{
  padding: 0 10px;
  margin-left: 6px;
}
</style>